<template>
  <div class="order-query-wrapper">
    <div class="content">
      <div>
      <el-row style="margin: 30px 0 0 30px;">
        <el-col>
          <h3>基本信息</h3>
        </el-col>
      </el-row>
      <el-form ref="formRef" :model="form" class="employee-form" label-position="top" label-width="120px">
        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="商家编号" prop="username">
              <el-input v-model="form.merchantNo" placeholder="请输入用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="商家名称" prop="name">
              <el-input v-model="form.merchantName" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="客户编号" prop="name">
              <el-input v-model="form.customerNo" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="客户名称" prop="idCard">
              <el-input v-model="form.customerName" placeholder="请输入身份证号"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="客户类别" prop="phone">
              <el-input v-model="form.customerType" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="行业类别" prop="company">
              <el-input v-model="form.industryType" placeholder="请输入所属公司"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="证件类别" prop="employeeId">
              <el-input v-model="form.certificateType" placeholder="请输入工号"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="证件号码" prop="jobDuty">
              <el-input v-model="form.certificateType" placeholder="请输入证件号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="客户地址" prop="employeeId">
              <el-input v-model="form.customerAddress" placeholder="请输入工号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="详细地址" prop="employeeId">
              <el-input v-model="form.detailedAddress" placeholder="请输入工号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="备注" prop="employeeId">
              <el-input type="textarea" v-model="form.certificateNo" placeholder="请输入备注" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row style="margin: 30px 0 0 30px;">
        <el-col>
          <h3>基本信息</h3>
        </el-col>
      </el-row>
      <el-form ref="formRef" :model="form1" label-position="top" label-width="100%" class="electricity-form">
        <el-row style="margin: 30px 0 0 30px;">
          <el-col span="8">
            <el-form-item label="用电户号" prop="electricityNo">
              <el-input v-model="form1.electricityNo" placeholder="请输入用电户号" maxlength="15"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="用户户名" prop="userName">
              <el-input v-model="form1.userName" placeholder="请输入用户户名" maxlength="50"></el-input>
            </el-form-item>

          </el-col>
          <el-col span="8" :offset="2">
            <el-form-item label="用电类别" prop="electricityType" style="width: 120px;">
              <el-select v-model="form1.electricityType" placeholder="请选择用电类别">
                <el-option label="居民生活用电" value="residential"></el-option>
                <el-option label="一般工商业用电" value="commercial"></el-option>
                <el-option label="大工业用电" value="industrial"></el-option>
                <el-option label="农业生产用电" value="agricultural"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btn-group"><el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </div>
  </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const form = reactive({
  merchantNo: '',      // 商家编号
  merchantName: '',    // 商家名称
  customerNo: '',      // 客户编号
  customerName: '',    // 客户名称
  customerType: '',    // 客户类别
  industryType: '',    // 行业类别
  certificateType: '', // 证件类别
  certificateNo: '',   // 证件号码
  customerAddress: '', // 客户地址
  detailedAddress: '', // 详细地址
  remarks: ''          // 备注
});

const form1 = reactive({
  electricityNo: '',   // 用电户号
  userName: '',        // 用户户名
  electricityType: ''  // 用电类别
})

const handleSubmit = () => {
  console.log('submit!')
}
const handleReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
.order-query-wrapper {
  display: flex;
  justify-content: center;
  /* 水平方向居中 */
  align-items: center;
  /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  background-color: lightcoral;

  .content {
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;
    overflow-y: scroll;

    .btn-group {
      text-align: center;
    }
  }
}
</style>